<template>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <router-link to="/" class="navbar-brand" href="#">FjpAdmin</router-link>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    
                    <router-link v-if="!user.authenticated" to="/register" tag="li"><a >注册</a></router-link>
                    <router-link v-if="!user.authenticated" to="/login" tag="li"><a >登录</a></router-link>
                    <router-link v-if="user.authenticated" to="/profile" tag="li"><a >个人中心</a></router-link>
                    <li v-if="user.authenticated"><a  @click.prevent="logout" href="#">退出</a></li>
                    <router-link to="/about" tag="li"><a >关于</a></router-link>
                </ul>
            </div>
        </div>
    </nav>
</template>

<script>
import { mapState } from 'vuex'

    export default {
        name: "TopMenu",
        computed:{
            ...mapState({
                user:state=>state.AuthUser
            })
        },
        data(){
            return{
                // username:this.$store.AuthUser.name?this.$store.AuthUser.name:'',
                // email:this.$store.AuthUser.email?this.$store.AuthUser.email:'',
            }
        },
        methods:{
            logout(){
                 console.log('111')
                this.$store.dispatch('logoutRequest').then(response=>{
                    this.$router.push({name:'home'});
                   
                })
            }
        }
    }
</script>

<style scoped>

</style>